/**
 * main.js文件说明：该文件是整个项目的入口文件。
 */
// 引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数。createApp 代表了创建一个应用实例对象Application。
// 变化1：构造函数是大写大头的，工厂函数不是大写开头的。
// 变化2；构造函数是通过new关键字调用的，工厂函数不是通过new关键字调用的，可以直接调用【此处引入工厂函数createApp，可以在下面直接调用createApp(App)，不需要再New Vue构造函数了】。
import {createApp} from 'vue'


// 【Vue2】引入vue.js，对比学习上面的引入Vue构造函数的区别。
// import Vue from 'vue'
// 引入所有组件的父组件App
import App from './App.vue'

// Vue3 的语法，进行拆解理解
// createApp(App).mount('#app');

// 创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更"轻"，app身上没有vm身上的属性多)。
const app = createApp(App);
app.mount('#app');

// // Vue2 的写法
// const vm = new Vue({
//     render: h => h(App),
// });
// vm.$mount('#app');


// // 【 Vue2 的写法】创建Vue实例对象：vm
// new Vue({
//     // 其中该行代码相当于是：.$mount('#app')
//     // "el": App,
//     // 功能描述：该行代码的功能是将App组件放入容器中。
//     render: h => h(App),
// }).$mount('#app')
//
// // 其中.$mount('#app') 相当于是："el": "#app",


/**
 *                   vm【Vue2】/app【Vue3】
 *                           |
 *                          App
 *           |              |               |
 *         组件A            组件B           组件C
 *      |   |  |        |    |   |     |    |    |
 *     组件AA ...     组件BB  ...       组件CC ...
 *
 *
 * - 备注1：Vue2里面，vm领导App.vue组件，而App.vue组件领导其他全部的组件。
 * - 备注2：Vue3里面，app领导App.vue组件，而App.vue组件领导其他全部的组件。
 */